<template>
	<view class="bg">
		<u-sticky bgColor="#fff" style='top:0'>
			<u-tabs :current="tabsIndex" @click="click" style="background-color: #FFFFFF;padding-bottom:10rpx"
				:list="list1" lineWidth="30" lineColor="#8438FC" :activeStyle="{
							color: '#8438FC',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}" :inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;padding-bottom:5rpx">
			</u-tabs>
		</u-sticky>
		<view class="list" v-for="(item,index) in list">
			<view class="list-t" @click="toDetil(item.technician_id)">
				<view class="list-t1">
					<image :src="item.technician_avatar" mode=""></image>
				</view>
				<view class="list-t2">
					<view class="list-t3">
						<text class="text1">{{item.technician_nickname}}</text>
						<view class="real">
							<text>实名</text>
						</view>
					</view>
					<text class="text2">{{item.created_at}} {{item.technician_city}}</text>
				</view>
			</view>

			<view class="list-b">
				<view class="content">
					<view class="word" @click="goTrends(item.id)">
						<text class="text3">{{item.title}}</text>
						<!-- 		<u-read-more showHeight="50" :toggle="true">
						  <rich-text :nodes="item.content"></rich-text>
						</u-read-more> -->
					</view>
					<!-- 	<view class="image" v-if="item.images.length>0">
						<u-album :urls="item.images"></u-album>
					</view> -->
					<view class=" flex-row-flex-start flex-wrap">
						<view @click="videoClick(item)" v-if="!(item.video
																			.length==0)" class="video-box">
							<view class="video-box1">
								<image :src="item.videoImage" mode="aspectFill"></image>
								<!-- <x-video :src="item.video" class="video-box1" :initial-time='1' :autoplay='false' :muted='true' :controls='false' object-fit='fill' height='150rpx' /> -->

								<!-- <video :show-center-play-btn='false' :initial-time='1' direction="0" :autoplay='false' :muted='true' :controls='false' :src="item.video" object-fit='fill'  poster="/static/logo/logo.png"></video> -->
								<!-- <image ：src="https://qiniu.wanmo666.com/uploads/images/2023-05/7cf138a7d6dc489a1a83df49a069361b.mp4" mode=""></image> -->
								<!-- <image :src="item.videoImage" mode="aspectFill"></image> -->
							</view>


							<view style="margin-top: -150rpx;" class="">
								<image src="/static/video.png"
									style="margin-left: 50rpx; width: 50rpx; height: 50rpx; margin-top: 50rpx;" mode="">
								</image>


							</view>



						</view>
						<image @click.stop="previewImageClick(item,index)" class="video-box" :src="it"
							v-for="(it,index) in item.images" mode="aspectFill"></image>
					</view>


				</view>

			</view>

		</view>

		<!-- <view class="list">
			<view class="list-t">
				<view class="list-t1">
					<image src="../../static/demo/2.jpg" mode=""></image>
				</view>
				<view class="list-t2">
					<view class="list-t3">
						<text class="text1">徐苗苗</text>
						<view class="real">
							<text>实名</text>
						</view>
					</view>
					<text class="text2">2022-10-22 15：21 北京</text>
				</view>
			</view>
			<view class="list-b">
				<view class="content">
					<view class="video">
						<view class="box">
							<video id="myVideo" style="width: 100%; height: 100%;" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
							     enable-danmu danmu-btn controls></video>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view>
			<Tabbar :value='2' />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsIndex: 0,
				list1: [{
					name: '同城'
				}],
				list: [],
				page: 1,
				limit: 10,
				suo: true,
				status: 'loadmore',
				city: ''
			}
		},
		onLoad() {
			this.twoDynamic()
			this.getLat()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.suo = true
			this.twoDynamic()

		},
		onReachBottom() {
			if (this.suo) { //定义个小锁，当没有数据时锁住suo
				this.status = 'loading';
				this.page = ++this.page;
				setTimeout(() => {
					this.twoDynamic()
				}, 1000)
			}
		},
		methods: {
			click(e) {
				console.log(e)
				this.tabsIndex = e.index
				this.page = 1
				this.suo = true
				this.twoDynamic()
			},
			getLat() {
				let _this = this
				uni.getLocation({
					altitude: false,
					geocode: true,
					type: 'gcj02',
					success: (res) => {
						_this.local = 1
						let {
							latitude,
							longitude,
							address
						} = res;
						if (!address) {
							address = {}
						}

						_this.Dzarr(longitude, latitude)



					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			Dzarr(longitude, latitude) {
				this.$http.post('api/map_address', {
					longitude: longitude,
					latitude: latitude
				}).then(res => {
					this.city = res.addressComponent.city

				})
			},
			previewImageClick(item, index) {

				uni.previewImage({
					urls: item.images,
					current: index

				})
			},
			videoClick(item) {
				uni.navigateTo({
					url: '/pages/my/vido?video=' + item.video
				})
			},
			twoDynamic() {
				var data = {
					city: this.city,
					page: this.page,
					limit: 10
				}
				// if (this.tabsIndex) {
				// 	data.city = this.city
				// }
				this.$http.post('api/dynamic/list', data).then(res => {
					console.log("下拉请求通知列表", res);
					uni.stopPullDownRefresh()
					// this.list = this.list.concat(res)
					if (this.page == 1) {

						this.list = res


					} else {
						this.list = this.list.concat(res)
					}


					//在这里要进行一个判断，当后端传给我的数据小于每页的数据时就显示没有更多了
					if (res.length == '') {
						this.status = 'nomore';
						this.suo = false
					} else if (res.length < 10) {
						this.status = 'nomore';
						this.suo = false
					} else if (res.length = 10) {
						this.status = 'loadmore';
						this.suo = true
					}

				})
			},
			twoDynamic1() {
				var data = {

					page: this.page,
					limit: 10
				}
				if (this.tabsIndex) {
					data.city = this.city
				}
				this.$http.post('api/dynamic/list', data).then(res => {
					console.log("下拉请求通知列表", res);
					uni.stopPullDownRefresh()
					// this.list = this.list.concat(res)
					if (this.page == 1) {

						this.list = res


					} else {
						this.list = this.list.concat(res)
					}
					this.list.forEach(item => {
						if (item.video.length) {
							var url = item.video
							// this.getVideoPoster(item.video)
							const that = this;
							let video = document.createElement('video')
							video.setAttribute('crossOrigin',
								'anonymous') // 处理跨域，H5需后台支持，请求的视频资源响应投标需有Access-Control-Allow-Origin
							video.setAttribute('src', url)
							video.setAttribute('width', 400)
							video.setAttribute('height', 400)
							video.setAttribute('preload', 'auto')
							// uni.chooseVideo选择视频，当选用手机拍摄的视频时，地址是相对地址，如 _doc/uniapp_temp_1650594368317/camera/1650594390147.mp4
							// 可播放，但是loadeddata一直不执行，会触发error事件，视频加载失败
							// 应先转换成本地地址
							video.addEventListener('loadeddata', function() {
								console.log('视频第一帧加载完')
								let canvas = document.createElement('canvas')
								let width = video.width // canvas的尺寸和图片一样
								let height = video.height
								canvas.width = width
								canvas.height = height
								canvas.getContext('2d').drawImage(video, 0, 0, width,
									height) // 绘制canvas
								const dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
								that.demo = dataURL;
								that.$set(item, 'videoImage', that.demo);

								// return dataURL
							})

							video.addEventListener('error', err => {
								console.log('视频加载失败', err)
							})


						}

					})
					//在这里要进行一个判断，当后端传给我的数据小于每页的数据时就显示没有更多了
					if (res.length == '') {
						this.status = 'nomore';
						this.suo = false
					} else if (res.length < 10) {
						this.status = 'nomore';
						this.suo = false
					} else if (res.length = 10) {
						this.status = 'loadmore';
						this.suo = true
					}

				})
			},
			goTrends(id) {
				uni.navigateTo({
					url: '/pages/my/trendsDetile?id=' + id
				})
			},
			toDetil(id) {
				uni.navigateTo({
					url: '/bundle/pages/techDeil/techDeil?id=' + id
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.video-box {
		width: 150rpx;
		height: 150rpx;
		margin-right: 14rpx;
		margin-top: 14rpx;
		border-radius: 8rpx;
		background-color: #f4f4f4;
	}

	.video-box1 {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;

		video {
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
		}

		image {
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.bg {
		background-color: #f3f5f9;
		min-height: 100vh;

		.list {
			width: 100%;
			min-height: 200rpx;
			background-color: #fff;
			margin-bottom: 10rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.list-t {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;

				.list-t1 {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.list-t2 {
					width: 90%;
					height: 100%;
					padding: 10rpx;
					box-sizing: border-box;

					/* background-color: #66ffcc; */
					.list-t3 {
						width: 100%;
						display: flex;
						align-items: center;
						font-size: 30rpx;

						.real {
							font-size: 24rpx;
							margin-left: 10rpx;

							color: #FFFFFF;
							padding: 0 10rpx;
							background: #C04AF3;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							opacity: 0.3;
						}
					}

					.text2 {
						font-size: 24rpx;
						color: #999;
					}
				}
			}

			.list-b {
				width: 100%;
				min-height: 150rpx;
				margin-top: 20rpx;
				/* background-color: #66ffcc; */
				display: flex;
				justify-content: flex-end;

				.content {
					width: 88%;
					min-height: 150rpx;

					/* background-color: #31d081; */
					.image {
						width: 100%;
						min-height: 150rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;

						image {
							width: 31%;
							height: 180rpx;
							margin-right: 10rpx;
						}
					}

					.word {
						width: 100%;
						// min-height: 100rpx;
						margin-bottom: 10rpx;
						display: flex;
						flex-direction: column;

						/* justify-content: space-between; */
						.text3 {
							font-size: 32rpx;
							margin-bottom: 10rpx;
						}

						.text4 {
							font-size: 28rpx;
							color: #999;
						}
					}

					.video {
						width: 100%;
						height: 150rpx;

						.box {
							width: 31%;
							height: 150rpx;

						}
					}
				}
			}
		}
	}
</style>